<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回合制战斗</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- 主菜单 -->
    <div class="container" id="mainMenu">
        <h1 class="game-title">回合制战斗</h1>
        <div class="menu-container">
            <button class="menu-button" onclick="startGame()">开始游戏</button>
            <button class="menu-button" onclick="openSettings()">设置</button>
            <button class="menu-button" onclick="openAbout()">关于游戏</button>
        </div>
    </div>

    <!-- 设置模态框 -->
    <div class="modal" id="settingsModal">
        <div class="modal-content">
            <button class="close-button" onclick="closeModal('settingsModal')">&times;</button>
            <h2>游戏设置</h2>
            <div class="settings-option">
                <label for="difficulty">游戏难度</label>
                <select id="difficulty">
                    <option value="easy">简单</option>
                    <option value="normal" selected>普通</option>
                    <option value="hard">困难</option>
                </select>
            </div>
            <div class="settings-option">
                <label for="volume">音量</label>
                <input type="range" id="volume" min="0" max="100" value="50">
            </div>
            <button class="menu-button" onclick="saveSettings()">保存设置</button>
        </div>
    </div>

    <!-- 关于游戏模态框 -->
    <div class="modal" id="aboutModal">
        <div class="modal-content">
            <button class="close-button" onclick="closeModal('aboutModal')">&times;</button>
            <h2>关于游戏</h2>
            <p style="margin-top: 20px; line-height: 1.6;">
                这是一个回合制战斗游戏。<br>
                在游戏中，你将扮演一名勇士，与各种怪物进行战斗。<br>
                通过合理运用攻击和防御，击败对手获得胜利。<br><br>
                版本：1.0.0<br>
                开发者：Your Name
            </p>
        </div>
    </div>

    <!-- 游戏界面（初始隐藏） -->
    <div id="gameInterface">
        <canvas id="gameCanvas"></canvas>
    </div>

    <script>
        // 添加游戏状态管理
        const GameState = {
            MENU: 'menu',
            PLAYING: 'playing',
            PAUSED: 'paused'
        };

        let currentGameState = GameState.MENU;

        // 打开设置模态框
        function openSettings() {
            document.getElementById('settingsModal').style.display = 'flex';
        }

        // 打开关于模态框
        function openAbout() {
            document.getElementById('aboutModal').style.display = 'flex';
        }

        // 关闭模态框
        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }

        // 保存设置
        function saveSettings() {
            const difficulty = document.getElementById('difficulty').value;
            const volume = document.getElementById('volume').value;
            // 这里可以添加保存设置的逻辑
            console.log('Settings saved:', { difficulty, volume });
            closeModal('settingsModal');
        }

        // 修改开始游戏函数
        function startGame() {
            currentGameState = GameState.PLAYING;
            document.getElementById('mainMenu').style.display = 'none';
            const gameInterface = document.getElementById('gameInterface');
            const canvas = document.getElementById('gameCanvas');
            const ctx = canvas.getContext('2d');
            
            // 设置Canvas尺寸
            canvas.width = 800;
            canvas.height = window.innerHeight;
            
            gameInterface.style.display = 'flex';
            
            // 初始化游戏
            initGame(ctx, canvas);
        }



        // 点击模态框外部关闭模态框
        window.onclick = function(event) {
            if (event.target.className === 'modal') {
                event.target.style.display = 'none';
            }
        }
    </script>
    <script src="script.js"></script>
</body>
</html>